{% extends "communications/base.html" %}


{% load static %}

{% block title %}
校园生活
{% endblock %}
{% block right %}


<div class="content_place col-md-8" style="height:100%">


    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a style="color:black"
                   href="{% url 'communications:information' category_class_id %}?search={{ search }}">
                    最新
                </a>
            </li>
            <li class="breadcrumb-item">
                <a style="color:black"
                   href="{% url 'communications:information' category_class_id %}?order=no_visitor&search={{ search }}">
                    最热
                </a>
            </li>
        </ol>
    </nav>
    <!-- 搜索栏 -->
    <div class="row">
        <div class="col-auto mr-auto col-md-5">
            <form class="form-inline">
                <label class="sr-only">content</label>
                <input type="text"
                       class="form-control mb-2 mr-sm-2"
                       name="search"
                       placeholder="搜索文章..."
                       style="width:200px;float:left"
                >
                <button type="submit" class="btn btn-default" style="float:left">搜索</button>
            </form>
        </div>
    </div>

    <!-- 新增，搜索提示语 -->
    {% if search %}
    {% if posts %}
    <h4><span style="color: red">"{{ search }}"</span>的搜索结果如下：</h4>
    <hr>
    {% else %}
    <h4>暂无<span style="color: red">"{{ search }}"</span>有关的文章。</h4>
    <hr>
    {% endif %}
    {% endif %}
    <hr>
<!--    <div class="information_classify row" style="">-->
<!--        <ul id="information_classify" class="nav nav-pills text-center nav-justified"-->
<!--            style="margin-top:30px;">-->
<!--            <li role="presentation" class="communication_information"><a-->
<!--                    href="{% url 'communications:information' 1 %}"><span style="font-size:30px"-->
<!--                                                                          class="glyphicon glyphicon-home"></span><br>校园热点</a>-->
<!--            </li>-->
<!--            <li role="presentation" class="communication_trade"><a-->
<!--                    href="{% url 'communications:information' 2 %}"><span style="font-size:30px"-->
<!--                                                                          class="glyphicon glyphicon-shopping-cart"></span><br>二手贸易</a>-->
<!--            </li>-->
<!--            <li role="presentation" class="communication_items"><a-->
<!--                    href="{% url 'communications:information' 3 %}"><span style="font-size:30px"-->
<!--                                                                          class="glyphicon glyphicon-th"></span><br>物品丢失</a>-->
<!--            </li>-->
<!--            <li role="presentation" class="communication_confession"><a-->
<!--                    href="{% url 'communications:information' 4 %}"><span style="font-size:30px"-->
<!--                                                                          class="glyphicon glyphicon-gift"></span><br>校园表白</a>-->
<!--            </li>-->
<!--        </ul>-->

<!--    </div>-->
    {% for post in posts %}


    <div class="row" style="margin:20px auto;padding: 10px;box-shadow: 0 0 10px #e3e3e3;">

        <!-- 栏目 -->
        <!--            {% if post.column %}-->
        <!--            <div class="col-md-8">-->
        <!--                <button type="button"-->
        <!--                        class="btn btn-sm mb-2-->
        <!--                        {% if post.column.title == 'Django' %}-->
        <!--                            btn-success-->
        <!--                        {% elif post.column.title == 'Java' %}-->
        <!--                            btn-danger-->
        <!--                        {% elif post.column.title == 'HTML' %}-->
        <!--                            btn-warning-->
        <!--                        {% endif %}-->
        <!--                    "-->
        <!--                >-->
        <!--                    {{ post.column }}-->
        <!--                </button>-->
        <!--            </div>-->
        <!--            {% endif %}-->

        <!-- 作者 -->
        <div class="col-md-12" style="height:35px">
            <a href="{% url 'users:base-information' post.author.id %}">
                <div class="post_author_img" style="float:left">
                    <div
                            style="height: 35px; padding-top: 0;padding-bottom: 0">
                        {% if post.author.image %}
                        <img src="{{ post.author.image.url }}" alt="头像" class="img-circle"
                             style="height: 35px;width: auto;"/>
                        {% else %}
                        <img src="{% static 'images/users/settings/sample.jpg' %}" alt="默认图像" class="img-circle"
                             style="height: 35px;width: auto;"/>
                        {% endif %}
                    </div>
                </div>
                <div class="post_author_name" style="float:left;height:35px;line-height:35px;overflow:hidden; ">
                    <h4 style="height:35px;line-height:35px;overflow:hidden;color:grey;margin-top:0px">&nbsp;
                        {{ post.author }}</h4>
                </div>
            </a>


        </div>
        <br>
        <!--文章标题-->
        <!--            |slice:"3"-->
        <a href="{% url 'communications:postDetail' post.id %}">
            <div style="padding-left:20px;padding-top:10px;text-align:left;font-size:8px;color:#333;word-wrap:break-word;word-break: break-all;"
                 class="">
                <h5>{{ post.title|slice:"20" }} &nbsp;...</h5>

            </div>
            <!-- 标签 -->
            <!--            <div class="col-md-4" style="margin-top:25px">-->
            <!--                        <span style="float:left;">-->
            <!--                        {% for tag in post.tags.all %}-->
            <!--                        <div href="#"-->
            <!--                             class="badge badge-secondary"-->
            <!--                        >-->
            <!--                        {{ tag }}-->
            <!--                        </div>-->
            <!--                        {% endfor %}-->
            <!--                        </span>-->
            <!--            </div>-->

            <!--            <div class="col-md-12" style="font-size:20px;color:grey;word-wrap:break-word;word-break: break-all;">-->
            <!--                <p style="word-wrap:break-word;word-break: break-all;">{{ post.content|safe }}</p>-->
            <!--            </div>-->
            <div class="col-md-12" style="height:20px">

            </div>
            <!--<img src="{% static 'images/communications/changda.png' %}" width="120" height="120" alt=""> -->
            <div class="" style="float:right;padding-right:20px;">
                <!--                <a class="btn btn-success btn-xs" href="{% url 'communications:postLike' post.id %}"-->
                <!--                   role="button"><span-->
                <!--                        class="glyphicon glyphicon-thumbs-up"></span>&nbsp;<span-->
                <!--                        class="badge">{{post.no_like}}</span></a>-->
                <!--                <a class="collect btn btn-default btn-xs" role="button">收藏&nbsp;<span class="glyphicon glyphicon-star-empty"-->
                <!--                                                                               aria-hidden="true"></span></a>-->
                <!--                <a class="btn btn-default btn-xs" role="button">评论</a>-->

                <!--                显示点赞数-->
                &nbsp;<span style="color:#888">

                                <span class="glyphicon glyphicon-thumbs-up" style="color:#f1d204;"></span> {{ post.no_like }}

                    </span>
                &nbsp;
                <span style="color:#888;">

                                <span class="glyphicon glyphicon-comment" style="color:#f1d204;"></span> {{ post.no_comment }}

                    </span>
                <!--                显示浏览量-->
                &nbsp;
                <span style="color:#888;">

                                <span class="glyphicon glyphicon-eye-open" style="color:#f1d204;"></span> {{ post.no_visitor }}

                    </span>

            </div>
        </a>


    </div>


    {% endfor %}

    <!-- 页码导航 -->
    {% if posts %}
    <div style="text-align:center">
        <div class="pagination row">
            <div class="m-auto">
        <span class="step-links">
            <!-- 如果不是第一页，则显示上翻按钮 -->
            {% if posts.has_previous %}
                <a href="?page=1&order={{ order }}&search={{ search }}" class="btn btn-success">
                    &laquo; 1
                </a>
                <span>...</span>
                <a href="?page={{ posts.previous_page_number }}&order={{ order }}&search={{ search }}"
                   class="btn btn-secondary"
                >
                    {{ posts.previous_page_number }}
                </a>
            {% endif %}

            <!-- 当前页面 -->
            <span class="current btn btn-danger btn-lg">
                {{ posts.number }}
            </span>

            <!-- 如果不是最末页，则显示下翻按钮 -->
            {% if posts.has_next %}
                <a href="?page={{ posts.next_page_number }}&order={{ order }}&search={{ search }}"
                   class="btn btn-secondary"
                >
                    {{ posts.next_page_number }}
                </a>
                <span>...</span>
                <a href="?page={{ posts.paginator.num_pages }}&order={{ order }}&search={{ search }}"
                   class="btn btn-success"
                >
                    {{ posts.paginator.num_pages }} &raquo;
                </a>
            {% endif %}
        </span>
            </div>
        </div>
    </div>
    {% else %}
    <div style="text-align:center">
        <h4>暂无文章</h4>

    </div>
    {% endif %}

</div>
<!--右侧边栏-->
<div class="content_place col-md-3" style="margin:50px;padding: 10px;box-shadow: 0 0 10px #e3e3e3;height:auto">
    <div style="height:50px;border-bottom: 1px solid #e3e3e3;">
        <h4 style="padding-top:10px" class="text-center">最热文章</h4>
    </div>
    <div style="height:auto">
        {% for post_fav in posts_fav %}

        <a href="{% url 'communications:postDetail' post_fav.id %}">
            <div class="row" style="margin:20px auto;padding: 10px;box-shadow: 0 0 10px #e3e3e3;">


                <!--文章标题-->
                <div style="text-align:left;padding-left:20px;color:black" class="">
                    {{ post_fav.title|slice:"10" }} &nbsp;...
                    <span style="float:right">
                            <small class="col align-self-end" style="color: gray;">
                                <span style="color:#f1d204;">浏览：</span> {{ post_fav.no_visitor }}
                            </small>
                    </span>
                </div>


            </div>


        </a>


        {% endfor %}
    </div>

</div>


<script>
     $(document).ready(function () {
        $("ul#information_classify li").eq({{ category_class_id }}-1).addClass('active');
     });






</script>
<style>
   ul#information_classify li a:hover{
    color:#FFAE01;
box-shadow: 0 0 10px #e3e3e3;
   }
   ul#information_classify li a:active{
    color:#FFAE01;
    box-shadow: 0 0 10px #e3e3e3;
   }
   a {
    text-decoration:none;
   }
   a:hover {
    text-decoration:none;
   }

































</style>


{% endblock %}

